<template>
	<view>
		<view class="info">
			<view class="box1 d-s-c">
				<view>日期：{{study.date}}</view>
				<view>时间：{{study.time}}</view>
			</view>
			<view class="box1 d-s-c">
				<view>姓名：{{study.nickname}}</view>
				<view>年级：{{study.grade}}</view>
			</view>
			<view class="box2  d-c-s">
				<view class="text">所学词库：{{study.book_name}}</view>
				<!-- <view class="box2-1">
					<view>新教材【2025】外研版四年级上册</view>
					<view>新教材【2025】外研版四年级下册</view>
				</view> -->
			</view>
			<view class="box1  d-s-c">
				<view>复习词汇：{{study.review_word_num}}个</view>
				<view>复习遗忘词汇：{{study.review_no_word_num}}个</view>
				<view>复习遗忘率：{{study.review_ratio}}%</view>
			</view>
			<view class="box1 d-s-c">
				<view>学新词汇：{{study.total_word_num}}个</view>
				<view>学新遗忘词汇：{{study.forget_word_num}}个</view>
				<view>学新遗忘率：{{study.forget_ratio}}%</view>
			</view>
			<!-- <view class="box2 d-c-s">
				<view class="text">学习进度：</view>
				<view class="box2-1">
					<view>新教材【2025】外研版四年级上册第1轮 6%</view>
					<view>新教材【2025】外研版四年级下册第1轮 8%</view>
				</view>
			</view> -->
			<view class="box3 d-s-c">
				<view>今日共识记词汇<text>（复习遗忘词汇+学新词汇）</text>：</view>
				{{study.all_word_num}}个
			</view>
		</view>
		
		<view class="evaluate">
			<view class="top d-b-c">
				<view class="text d-c-c">
					教练评语：
					<image src="/static/index1/50.png" mode="widthFix" @click="copy(study.feedback)"></image>
				</view>
				<image class="btn" src="/static/index1/51.png" mode="widthFix" @click="submit"></image>
				<!-- <image src="/static/index1/52.png" mode="widthFix"></image> -->
				<image src="/static/index1/53.png" mode="widthFix" @click="templateShow=true"></image>
			</view>
			<view class="content">
				<textarea class="textarea" v-model="study.feedback" maxlength="-1"></textarea>
			</view>
		</view>
		
		<u-popup mode="bottom" v-model="templateShow">
			<view class="template">
				<view class="title">点击即可复制评语</view>
				<view class="item" v-for="(template, index) in templateList" :key="index" @click="copy(template.content)">{{template.content}}</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				studyId: 0,
				study: {},
				templateShow: false,
				templateList: [],
				info: {
					date:'2025-04-20',
					time:'11:02-12:02',
					name:'',
					grade:'',
					word:['新教材【2025】外研版四年级上册','新教材【2025】外研版四年级上册'],
					word1:'',
					word2:'',
					word3:'',
					nWord1:'',
					nWord2:'',
					nWord3:'',
					progress:[
						{name:'新教材[2025】外研版四年级上册第1轮',val:'8%'},
						{name:'新教材[2025】外研版四年级上册第1轮',val:'8%'}
					],
					total:8
				} ,
				value:`今天我们的主要内容是带泽泽同学体验了我们的速记课程，在上课的过程中我发现泽泽同学有以下优点：
					1.泽泽是一个思维很活跃的小朋友哦，遇到不认识的单词跟着老师记一遍就基本认识。
					2.泽泽同学的发音很好哦，我觉得泽泽同学不会读可能是音标不认识，如果后续还续课的话我们会在教授单词的过程中插入音标，让泽泽同学对音标有一定的了解。
					3.上课效率很高，很听话，紧跟老师的步伐进行单词的记忆
					当然在上课过程中也发现了泽泽同学的不足之处
					1.不够自信哦，有的单词可能学过之后泽泽同学知道它的意思但是不敢说，如果后续还上课，希望泽泽同学能够大胆的说，即使说错了也没关系，学习就是一个不断纠错重学的过程，所以不必太担心对错，学到东西才是我们的最终目的。
					2.泽泽同学的词汇量不太够哦，泽泽同学需要扩充词汇量来更好的与初中衔接。
					如果泽泽同学续课，我们有以下两种计划可选：
					1.打基础。学习我们小学的单词，把基础打牢，第一是可以应付我们即将到来的期末考试，第二是为了更好的适应初中英语，因为初中的很多英语单词都会在小学学到。
					2.扩充词汇量。继续学习新单词，增加词汇量，英语学习词汇量是基础，词汇量够了，英语看起来就会像做语文一样了
					不管泽泽后续续课与否我都想说你是一个很棒的小孩儿，很优秀，英语学习其实很简单，不要害怕英语哦，要勇敢的面对并且战胜它！
					Nothing in the world is difficult for one who sets his mind to it.世上无难事，只怕有心人。
					如果后续需要我继续为泽泽同学上速记课程的话请与刘老师联系哦！`,
				value:`123`,
			};
		},
		onLoad(options) {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 2000)
				return false
			} else {
				if (options.studyId) {
					this.studyId = options.studyId
				} else {
					uni.navigateBack()
				}
				this.getStudy()
				let commonData = this.$store.state.commonData
				this.templateList = commonData.study_feedback_template ? commonData.study_feedback_template : []
			}
		},
		methods: {
			getStudy() {
				this.$u.get(this.$u.api.studyFeedback, {
					studyId: this.studyId,
				}).then((res) => {
					console.log(res)
					this.study = res.data
				}).catch((err) => {
					console.log(err)
					uni.$u.toast('获取数据失败')
				})
			},
			// 提交评语
			submit() {
				this.$u.post(this.$u.api.studyFeedback, {
					studyId: this.studyId,
					feedback: this.study.feedback,
				}).then((res) => {
					console.log(res)
					if (res.code === 1) {
						uni.$u.toast('提交成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					} else {
						uni.$u.toast(res.msg || '提交失败')
					}
				}).catch((err) => {
					console.log(err)
					uni.$u.toast(err.msg || '提交失败')
				})
			},
			// 复制
			copy(text) {
				if (text) {
					uni.setClipboardData({
						data: text,
						success() {
							uni.showToast({
								title: '复制成功',
								icon: 'none',
							})
						},
						fail() {
							uni.showToast({
								title: '复制失败，请手动复制',
								icon: 'none',
							})
						},
					})
				} else {
					uni.showToast({
						title: '没有内容可复制',
						icon: 'none',
					})
				}
			},
		},
	}
</script>

<style lang="less" scoped>
page{
	background-color: #EEFAFF;
	padding: 20rpx 30rpx 0;
}

.info{
	background-color: #fff;
	border-radius: 10rpx;
	padding: 15rpx 20rpx;
	font-size: 26rpx;
	.box1{
		flex-wrap: wrap;
		margin-bottom: 20rpx;
		view{
			width: 50%;
		}
	}
	
	.box2{
		margin-bottom: 20rpx;
		.box2-1{
			flex: 1;
		}
	}
	
	.box3{
		text{
			color: #999;
		}
	}
}

.evaluate{
	margin-top: 30rpx;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 25rpx 20rpx;
	.top{
		.text{
			image{
				width: 32rpx;
			}
		}
		& > image{
			width: 32rpx;
			margin-right: 18rpx;
		}
		.btn{
			width: 56rpx;
			margin-left: auto;
		}
	}
	
	.content{
		input{
			width: 100%;
			text-align: start;
		}
		textarea {
			width: 100%;
			height: 58vh;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			color: #333333;
			line-height: 40rpx;
		}
	}
}

.template {
	padding: 20rpx 30rpx;
	border-radius: 20rpx 20rpx 0 0;
	box-sizing: border-box;
	
	.title {
		font-size: 28rpx;
		color: #333333;
		font-weight: 600;
		text-align: center;
		margin-bottom: 10rpx;
	}
	.item {
		padding: 20rpx 0;
		font-size: 26rpx;
		color: #333333;
		line-height: 40rpx;
		border-bottom: 1rpx solid #CCCCCC;
	}
}
</style>
